import React from "react";
import { Dispatch } from "redux";
import { connect } from 'react-redux'
import { IFState } from '../../../store/reducer'
import { clearContent } from '../../../store/actionCreators'
import CustomB from './CustomB'
import CustomC from './CustomC'

type P = {
    content?: string;
    clearContent?: () => void;
}

const CustomA = (props: P) => {
    const { content, clearContent } = props
    return (
        <div>
            <p>CustomA Redux - store: {content}</p>
            <p>
                <button onClick={clearContent}>清除 store.content</button>
            </p>
            <CustomB />
            <CustomC />
        </div>
    )
}

// 映射 state
const mapState = (state: IFState) => {
    return {
        content: state.content
    }
}
// 映射 props
const mapProps = (dispatch: Dispatch) => {
    return {
        clearContent() {
            dispatch(clearContent('A'))
        }
    }
}

export default connect(mapState, mapProps)(CustomA)